<template>
  <div class="public-container">
    <div class="public-head">
      <h3>嗨！{{ name }}</h3>
      <h5>让我们一起做点好事儿吧~</h5>
      <p class="count">凝聚爱心用户 {{ count }} 次参与</p>
    </div>
    <div class="public-body">
      <h4>为你精选</h4>
      <div class="scroll-content" ref="wrapper">
        <ul class="cont" ref="cont">
          <!-- 滚动区域 -->
          <li
            class="cont-item"
            v-for="item in recommendList"
            :key="item.id"
            @click="onPublicEvent(item.parentid, item.id)"
          >
            <div class="cont-img">
              <img :src="item.pic ? 'http://192.168.101.65:9000' + item.pic : pic" alt="" />
            </div>
            <p class="name">{{ item.name }}</p>
            <p class="people-count">{{ item.person }}人次已报</p>
          </li>
        </ul>
      </div>

      <div class="ad">
        <img src="../assets/image/public_ad.jpg" alt="" />
      </div>

      <!-- 公益内容 -->
      <div class="main-content" v-for="item1 in contentlist" :key="item1.id">
        <h4>{{ item1.name }}</h4>
        <img :src="'http://192.168.101.65:9000' + item1.pic" alt="" />
        <div
          class="card"
          v-for="item2 in item1.childrenTreeNodes"
          :key="item2.id"
          @click="onPublicEvent(item1.id, item2.id)"
        >
          <img
            :src="item2.pic ? 'http://192.168.101.65:9000' + item2.pic : '/image/banner1.jpg'"
            alt=""
          />
          <div class="introduce">
            <p class="introduce-name">{{ item2.name }}</p>
            <p class="gray">{{ item2.person }} 人参与</p>
            <p class="help">帮助Ta</p>
          </div>
        </div>
      </div>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Tabbar from '../components/TabbarView.vue'
import { Recommendlist, ContentList, Count } from '../api/public.js'
import { showToast } from 'vant'
export default {
  data() {
    return {
      pic: require('../assets/image/default.png'),
      name: JSON.parse(window.sessionStorage.getItem('userInfo')).name,
      recommendList: [],
      contentlist: [],
      count: 0
    }
  },
  components: {
    Tabbar
  },
  created() {
    this.getcontentList()
    this.getRecommendlist()
  },
  mounted() {
    this.$nextTick(() => {
      const timer = setTimeout(() => {
        // 其实我也不想写这个定时器的，这相当于又嵌套了一层$nextTick，但是不这么写会失败
        if (timer) {
          clearTimeout(timer)
          this.verScroll()
        }
      }, 0)
    })
    this.getCount()
    // if (this.timer) {
    //   clearInterval(this.timer)
    // } else {
    //   this.timer = setInterval(() => {
    //     setTimeout(this.getCount(), 0)
    //   }, 10000)
    // }
  },
  methods: {
    // 滚动事件
    async verScroll() {
      const { data: res } = await Recommendlist()
      this.recommendList = res.data
      const width = this.recommendList.length * 193 // 动态计算出滚动区域的大小，产生滚动的原因是滚动区域宽度大于父盒子宽度
      this.$refs.cont.style.width = width + 'px' // 修改滚动区域的宽度
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            startX: 0,
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical',
            probeType: 3
          })
        } else {
          this.scroll.refresh() // 如果dom结构发生改变调用该方法
        }
      })
    },
    // 获取 为你精选
    async getRecommendlist() {
      const { data: res } = await Recommendlist()
      this.recommendList = res.data
    },
    // 获取 公益事件
    async getcontentList() {
      const { data: res } = await ContentList()
      if (res.code === 1) {
        this.contentlist = res.data
      }
    },
    async getCount() {
      const { data: res3 } = await Count()
      if (res3.code === 1) {
        this.count = res3.data
      } else {
        return showToast('获取数据有误！')
      }
    },
    // 跳转到对应的公益事件
    onPublicEvent(cateId, eventId) {
      console.log('跳转')
      this.$router.push({ name: 'pubevent', params: { cateId, eventId } })
    }
  }
}
</script>

<style lang="less" scoped>
.public-container {
  padding-bottom: 55px;
  overflow: hidden;

  .public-head {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(#fa7a4d, pink);
    border-bottom: 1px solid #fff;

    h3,
    h5 {
      margin: 10px;
      color: #fff;
      font-family: serif;
    }

    .count {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 80%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: 0;
      background-color: #fff;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
  }

  .public-body {
    width: 100%;
    margin: 10px 0;

    h4 {
      margin: 15px 0;
      padding-left: 10px;
      font-weight: 400;
    }

    .scroll-content {
      overflow: hidden;
      height: 190px;

      .cont {
        position: relative;
        list-style: none;
        white-space: nowrap;

        .cont-item {
          position: relative;
          display: inline-block;
          width: 180px;
          height: 100%;
          margin: 0 6px;
          background-color: #fff;
          border-radius: 6px;
          overflow: hidden;

          .cont-img {
            width: 180px;
            height: 120px;
            // padding-bottom: 100%;

            img {
              width: 100%;
              height: 100%;
            }
          }

          p {
            margin: 6px 0;
            padding-left: 5px;
          }

          .name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .people-count {
            font-size: 13px;
            color: #666;
          }
        }
      }
    }

    .ad {
      width: 95%;
      height: 90px;
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .main-content {
      padding: 0 10px;
      background-color: #fff;
      margin-top: 20px;

      h4 {
        font-weight: 600;
        padding: 10px 0;
        margin: 10px 0;
      }

      img {
        width: 100%;
        height: 150px;
      }
      .card {
        display: flex;
        margin: 10px 0;
        img {
          width: 40%;
          height: 90px;
        }

        .introduce {
          p {
            margin: 5px 0;
            margin-left: 10px;
          }
          .introduce-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .help {
            width: 70px;
            border: 1px solid orange;
            text-align: center;
            border-radius: 6px;
            font-size: 14px;
            color: orange;
          }
        }
      }
    }
  }
}

.orange {
  background-color: orange;
}
.green {
  background-color: green;
}
.gray {
  font-size: 13px;
  color: #666;
}
</style>
